<template>
  <div class="box">
    <div class="content">
    <div class="h2s">
     <h1>Hi QuiQ, 今日为你打造</h1>
    </div>
    <div class="suspend">
      <ul>
        <li v-for="item of getson" :key="item.id">
          <img :src="item.picUrl" alt="">
          <div class="ps">{{item.name}}</div>
           <span><van-icon name="audio" />{{item.trackCount}}</span>
        </li>
      </ul>
    </div>
    <div class="middles">
      <div class="middle-mag">
        <h1>一花一世界一草一菩提</h1>
        <div class="listen">
          <div class="listen-left">
            <ul>
              <li v-for="item in playlists" :key="item.id">
              <div class="detil" @click="detil(item.id)">
              <div class="detil-left"><van-image width="100" height="100" :src= item.coverImgUrl  class="huimg"/></div>
                <div class="detil-right">
                  <h1>{{item.name}}</h1>
                  <div class="sc"><span>{{item.description}}</span></div>
                </div>
              </div>
              </li>
            </ul>
          </div>
       </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>

import { getpersona, getPtense } from '@/api'
import Vue from 'vue'
import { Icon, Image as VanImage } from 'vant'
Vue.use(VanImage)
Vue.use(Icon)
export default {
  data () {
    return {
      // 推荐歌单
      getson: [],
      // 网友精选
      playlists: []
    }
  },
  methods: {
    detil (id) {
      this.$router.push({ name: 'deltes', params: { id } })
    }
  },
  created () {
    // log
  },
  // 推荐歌单
  mounted () {
    getpersona().then(res => {
      this.getson = res.data.result
    })
    getPtense().then(res => {
      this.playlists = res.data.playlists
    })
  }
}
</script>
<style lang="scss">
html,body{
  background: #222;
}
  .content{
    padding: 0.15rem;
  }
  .music-top{
    height: 0.4rem;
    box-sizing: border-box;
    display: flex;
  }
  .h2s{
    color: #ffcd32;
    margin-top: 0.5rem;
    h1{
      font-size: 0.13rem;
      text-align: center;
      margin-top:0.18rem;
    }
  }
  .suspend{
    height: 1.3rem;
    // border: 1px solid black;
    margin-top: 0.1rem;
    overflow: hidden;
    ul{
      display: flex;
      overflow: auto;
      li{
        height: 1.3rem;
        border-radius: 0.1rem;
        margin-right: 0.1rem;
        position: relative;
          img{
            width: 1rem;
            height: 1rem;
            border-radius: 0.1rem;
          }
          .ps{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 0.9rem;
            font-size: 0.05rem;
            font-weight: inherit;
            line-height: 0.3rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.3);
          }
          .pa{
            position: absolute;
            bottom: 0.3rem;
            font-size: 0.1rem;
            color: #fff;
            right: 0.1rem;
          }
      }
    }
  }
  .middles{
    .middle-mag{
      h1{
        line-height: 0.3rem;
        color: #009966;
      }
      .listen{
        margin-top: 0.1rem;
        border: 1px solid rgba(114, 91, 114, 0.267);
        .listen-left{
          word-break:break-all;
          margin: 0 auto;
          ul{
            li{
              height: 1rem;
              overflow: hidden;
              margin-bottom: 0.2rem;
              .detil{
                display: flex;
                .detil-right{
                  h1{
                    height: 0.2rem;
                    font-size: 0.12rem;
                    text-indent: 0.1rem;
                    color: #fff;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .sc{
                    padding: 0.1rem;
                    height: 0.7rem;
                    color: rgba(255, 255, 255, 0.63);
                    font-size: 0.1rem;
                    line-height: 0.2rem;
                    text-indent: 0.2rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
